<template>
  <div>
    <div class="videoBox">
      <video
        controls="true"
        preload="auto"
        loop="loop"
        :src="video.playUrl"
      ></video>
    </div>
    <div class="info">
      <h3 class="title">{{ video.title }}</h3>
      <span class="desc">{{ video.description }}</span
      ><br />
      <div class="consumption">
        <span
          ><img src="../assets/img/点赞.png" alt="" />
          {{ video.consumption.replyCount }}</span
        >
        <span
          ><img src="../assets/img/分享.png" alt="" />
          {{ video.consumption.shareCount }}</span
        >
        <span
          ><img src="../assets/img/评论.png" alt="" />
          {{ video.consumption.replyCount }}</span
        >
        <span
          ><img src="../assets/img/收藏.png" alt="" />
          {{ video.consumption.collectionCount }}</span
        >
      </div>
    </div>
    <div class="author">
      <div class="icon"><img :src="video.author.icon" alt="" /></div>
      <div class="introduce">
        <p class="name">{{ video.author.name }}</p>
        <span>{{ video.author.description }}</span>
      </div>
    </div>
    <div>
        <ul>
            <li v-for="i in video.tags" :key="i.id">
                <div><img :src="i.bgPicture" alt=""></div>
                <div class="tag"><p class="title2">{{i.name}}</p>
                <span class="desc">{{i.desc}}</span>
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      video: {},
    };
  },
  mounted() {
    this.$request({
      url: "/api/v4/tabs/selected",
      params: {
        date: this.$route.query.date,
        page: parseInt(this.$route.query.page),
      },
    }).then((success) => {
      success.data.itemList.forEach((i) => {
        if (i.type == "video" && i.data.id == this.$route.query.id) {
          console.log(i);
          this.video = i.data;
        }
      });
    });
  },
};
</script>

<style scoped>
* {
  color: white;
}
.videoBox {
  height: 8rem;
  background-color: rgb(0, 0, 0);
}
video {
  width: 100%;
  height: 8rem;
}
.info {
  background-color: rgb(49, 48, 48);
  padding: 0.4rem;
}
.title {
  font-size: 0.5rem;
}
.desc {
  font-size: 0.01rem;
  color: #ccc;
}
.consumption {
  display: flex;
  justify-content: space-around;
  font-size: 0.5rem;
}
.consumption img {
  width: 0.7rem;
  vertical-align: bottom;
}
.author {
  display: flex;
  align-items: center;
  height: 2rem;
  background-color: rgb(46, 43, 43);
  padding: 0 0.4rem;
}
.icon {
  height: 1.5rem;
  overflow: hidden;
  border-radius: 0.75rem;
  margin-right: 0.4rem;
}
.icon img {
  width: 1.5rem;
}
.name {
  font-size: 0.5rem;
}
.introduce span {
  font-size: 0.36rem;
 
}
ul li{
    display: flex;
    background-color: rgb(24, 23, 23);
    padding: 0 .4rem;
    padding-top: .2rem;
  
}
li img{
    width: 8rem;
    height: 4rem;
}
.title2{
    font-size: .6rem;
    
}
.tag{
    padding-left: .4rem;
}
</style>